<template>
	<!-- <view>
		登录页面
	</view> -->
	<view class="box">
		<view class="head">
			<view class="head-l">
				<image @tap="gouserinfo" :src="userInfo.icon"></image>
			</view>
			<view class="head-c" v-if="tokeninfo">
				<view class="headc">Hi~</view>
				<view class="heads">您还没有登录呢</view>
			</view>
			<view class="head-c" v-else>
				<view class="headc">{{userInfo.nickname}}</view>
				<view class="heads">用户名:{{userInfo.username}}</view>
			</view>
		</view>
		<view class="login">
			<view class="login-l" @click="goregister">注册</view>
			<view class="login-l r" @click="gouser">登录</view>
		</view>
		<view class="order">
			<view class="order-t">我的订单</view>
			<view class="order-b">
				<view class="orderitem" @click="goorder" v-for="item in orderitemList" :key="item.index">
					<image :src="item.src" ></image>
					<view>{{item.name}}</view>
				</view>
				<!-- <view class="orderitem" @click="goorder">
					<image src="../../static/icons/pay-done.png" ></image>
					<view>已付款</view>
				</view>
				<view class="orderitem" @click="goorder">
					<image src="../../static/icons/icon-car.png"></image>
					<view>已发货</view>
				</view>
				<view class="orderitem" @click="goorder">
					<image src="../../static/icons/icon-done.png" ></image>
					<view>已收货</view>
				</view>
				<view class="orderitem" @click="goorder">
					<image src="../../static/icons/icon-back.png" ></image>
					<view>售后</view>
				</view> -->
			</view>
		</view>
		<view class="list">
			<view class="lists"  @tap="gocollected">
				<image src="../../static/icons/save.png"></image>
				<view>商品收藏</view>
			</view>
			<view class="lists">
				<image src="../../static/icons/brand.png"></image>
				<view>品牌</view>
			</view>
			<view class="lists" @tap="goarticleList">
				<image src="../../static/icons/article.png"></image>
				<view >文章收藏</view>
			</view>
			<view class="lists" @click="gosite">
				<image src="../../static/icons/address.png"></image>
				<view>地址</view>
			</view>
			<view class="lists">
				<image src="../../static/icons/card.png"></image>
				<view>卡包</view>
			</view>
			<view class="lists" @tap="gocar">
				<image src="../../static/icons/cart2.png"></image>
				<view>购物车</view>
			</view>
			<view class="lists">
				<image src="../../static/icons/tel.png"></image>
				<view>联系客服</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getMemberInfo,uploadAvatar} from "../../api/mine/index.js"
	import mix from "@/mixins/index.js"
	export default {
		mixins:[mix],
		data() {
			return {
				//我的订单列表
				orderitemList:[
					{
						name:'代付款',
						index:0,
						src:"../../static/icons/icon-pay.png"
					},
					{
						name:'已付款',
						index:1,
						src:"../../static/icons/pay-done.png"
					},
					{
						name:'已发货',
						index:2,
						src:"../../static/icons/icon-car.png"
					},
					{
						name:'已收货',
						index:3,
						src:"../../static/icons/icon-done.png"
					},
					{
						name:'售后',
						index:4,
						src:"../../static/icons/icon-back.png"
					}
				],
				tokeninfo:true,
				userInfo:[],
				token:"",
			}
		},
		methods: {
			//跳转到登录页面
			gouser(){
				uni.navigateTo({
					url:"./user/user",
					
				})
			},
			//跳转到订单页面
			goorder(){
				uni.navigateTo({
					url:"./order/order",
					
				})
			},
			//跳转到地址页面
			gosite(){
				uni.navigateTo({
					url:"./site/site",
				})
			},
			//跳转到商品收藏
			gocollected(){
				uni.navigateTo({
					url:"./collected/collected",
				})
			},
			//跳转到文章收藏页面
			goarticleList(){
				uni.navigateTo({
					url:"./articleList/articleList",
				})
			},
			//跳转到注册页面
			goregister(){
				uni.navigateTo({
					url:"./register/register",
				})
			},
			//跳转到购物车页面
			gocar(){
				uni.navigateTo({
					url:"./car/car"
				})
			},
			//获取登录值
			Info(){
				getMemberInfo().then(res=>{
				console.log(res)
				this.userInfo=res.data.userInfo
				// if(this.userInfo){
				// 	this.tokeninfo=false;
				// }else{
				// 	this.tokeninfo=true;
				// }
				
			})
			},
			//点击跳转到修改页面
			gouserinfo(){
				uni.navigateTo({
					url:"./UserInfo/UserInfo",
				})
			}
		},
		onLoad(){			
			// this.Info();			
			var token=uni.getStorageSync("token");
			if(token){
				this.tokeninfo=false;
				this.Info();	
			}else{
				this.tokeninfo=true;
				uni.showModal({
					title:"登录提示",
					content:"尚未登录,是否选择登录",
					success(res) {
						console.log(res)
						if(res.confirm){
							uni.navigateTo({
								url:"./user/user"
							})
						}
					}
				})
			}
			}
			
		}
		
	
</script>

<style lang="scss" scoped>
.box{
	// width: 100%;
	height:100vh;
	background-color:#F1ECE7;
	padding: 0 15px;
	.head{
		width: 100%;
		height: 75px;
		margin-top: 30px;
		display: flex;
		justify-content: space-between;
		.head-l{
			width:75px;
			height:75px;
			border-radius: 50%;
			overflow: hidden;
			background-color: #808080;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.head-c{
			width:75%;
			height: 100%;
			font-size: 14px;
			.headc{
				margin-top: 18px;
			}
			.heads{
				margin-top: 10px;
			}
		}
	}
	.login{
		margin:20px 0 ;
		display: flex;
		justify-content: center;
		.login-l{
			width:91px;
			height:38px;
			margin-right:30px;
			text-align: center;
			line-height: 38px;
			border-radius: 5px;
			font-size: 15px;
			border: 1px solid #000;
		}
		.login-l.r{
			background-color:#354E44 ;
			color: #fff;
		}
	}
	.order{
		width: 100%;
		height: 104px;
		background-color: #fff;
		margin-top:30px ;
		.order-t{
			width: 281px;
			height:38px;
			line-height: 38px;
			margin: 0 auto;
			border-bottom: 1px solid #EAEAEA;
		}
		.order-b{
			padding: 0 27px;
			display: flex;
			justify-content: space-between;
			.orderitem{
				width:39px ;
				height: 52px;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				image{
					width: 20px;
					height: 20px;
					margin-top: 10px;
				}
				view{
					font-size: 13px;
					line-height: 18px;
					text-align: center;
				}
			}
		}
	}
	.list{
		// width: 100%;
		height: 300px;
		padding:40px 0 15px ;
		margin-top:30px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 5px;
		.lists{
		width:30%;
		height:100px;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
			image{
				width: 25px;
				height: 25px;
			}
			view{
				width: 100%;
				text-align: center;
				font-size: 13px;
				margin-top: -20px;
			}
		}
	}
}
</style>
